<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-05-16 14:38:46
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-06-27 21:06:09
 * @FilePath: \dance\components\ls-navbar\ls-navbar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="bg">
    <view class="nv">
      <view class="nv-arrow">
        <uv-icon name="arrow-left" color="#fff" size="33" @click="onLeft"></uv-icon>
      </view>
      <view class="title">
        <uv-avatar :src="headerpic" size="122rpx" mode="aspectFill"></uv-avatar>
        <text class="title-name">{{ title }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed } from 'vue';
  import { onLeft } from '@/common/js/fn';
  import store from '@/store/index.js'; //需要引入store
  import { defaultImages } from '@/common/js/global.js';
  let { state } = store;
  const props = defineProps({
    title: {
      type: String,
      default: ''
    }
  });
  let headerpic = computed(() => {
    return state.vuex_user.headerpic || defaultImages[2];
  });
</script>

<style lang="scss">
  .bg {
    background-color: #1d1f24;
  }
  .nv {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff7a66;
    border-radius: 0rpx 0rpx 87rpx 87rpx;
    height: 157rpx;
    position: relative;
    &-arrow {
      position: absolute;
      top: 45rpx;
      left: 23rpx;
      z-index: 999;
      height: 91rpx;
      width: 91rpx;
      box-shadow: 0px 0px 0px 0.2px #aaaaaa;
      background-color: rgba(0, 0, 0, 0.16);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      &-name {
        font-weight: bold;
        font-size: 49rpx;
				margin-left: 17rpx;
      }
    }
  }
</style>
